<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/js/jquery.js"></script>
    <link rel="stylesheet" href="lib/css/bootstrap.css">
</head>

<script>
    window.onload = function() {
        var p = document.getElementById("imooc");
        p.innerHTML = 'adfsdf';
        p.style.color = "red";
        pp = $(p);
        pp.html("asdsdaffasdfasdf");
    }
</script>

<body>
    <p id="imooc"></p>
    <button id="button_1">nihao</button>
    <button id="button_2">hello</button>
    <button id="button_3">hello3</button>
    <button id="button_4">hello4</button>
    <script>
        var p = $("#imooc").first();
        p.html('hello world').css('color', "red");
        p[0].style.color = "blue";
        p.get(0).innerHTML = "yellow";
        var b = $("#button_1");
        b = b.add("#button_2", "body").add("#button_3");
        b.addClass("btn btn-danger");
    </script>

</body>

</html>